<template>
	<view class="main">
		<nav-bar color="#fff" bgc="" bbtn>我的钱包</nav-bar>
		<view class="top">
			<view class="line">
				
			</view>
			<view class="ticket">
				<text>{{allData.balance}}</text></br>
				<text>可返现金额（元）</text>
				<view class="btn" @click.stop="goCashWitndrawal()">
					提现
				</view>
			</view>
			<view class="status">
				<text>返佣中：{{allData.backing}}元</text><text>累计总返佣：{{allData.allBack}}元</text>
			</view>
			<view class="record">
				<view class="record-title">
					提现记录
				</view>
				<view class="record-item" v-for="item in allData.list" :key="item.id" >
					<text>提现金额</text><text>{{item.status==0?'审核中':item.status==1?'成功':'失败'}}</text><text>{{item.amount}}元</text></br>
					<text class="record-item-time">{{item.add_time}}</text>
				</view>
<!-- 				<view class="record-item">
					<text>提现金额</text><text>成功</text><text>3000元</text></br>
					<text class="record-item-time">2020-02-02 14:00</text>
				</view>
				<view class="record-item">
					<text>提现金额</text><text>成功</text><text>3000元</text></br>
					<text class="record-item-time">2020-02-02 14:00</text>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				allData:{}
			}
		},
		methods: {
			goCashWitndrawal:function(){
				uni.navigateTo({
					url:"../cashWithdrawal/cashWithdrawal?balance="+this.allData.balance
				})
			}
		},
		onLoad:function(){
			let _this = this
			let param = {
				"token":this.token,
			}
			this.ajaxJson('myWithdraw',param,function(data){
				console.log(data);
				_this.allData = data
			})
		}
	}
</script>

<style scoped>
   *{
   	margin: 0;
   	padding: 0;
   	list-style: none;
   	box-sizing: border-box;
   	font-size: 0.75rem;
   }
   .top{
	   background-color: #FF9972;
	   height: 9rem;
	   padding: 4rem 0 0;
   }
   .line{
	   height: 0.3rem;
	   width: 92%;
	   margin:0 4%;
	   background-color: #FF6C35;
	   border-radius: 20px;
   }
   .ticket{
	   width: 88%;
	   height: 6rem;
	   margin: 0 6%;
	   background:-webkit-linear-gradient(top,#FFC7B5 0%,#fff 20%);
	   background:-moz-linear-gradient(top,#FFC7B5 0%,#fff 20%);
	   box-shadow: 0 3px 2px 0px #eee;
	   position: relative;
	   border-radius: 0 0 8px 8px ;
	   top: -0.15rem;
	   padding: 1.5rem 2rem;
	   position: relative;
   }
   .ticket text{
	   line-height: 1.5rem;
	   font-size: 0.85rem;
   }
   .ticket text:first-child{
	   color: #FF9972;
	   font-weight: bold;
   }
   .ticket text:nth-child(3){
	   color:#4E5366;
   }
   .btn{
	   position: absolute;
	   background:-webkit-linear-gradient(left,#FD6431 ,#FF9972 );
	   background:-moz-linear-gradient(left,#FD6431 ,#FF9972 );
	   padding: 0.25rem 1rem;
	   color: #fff;
	   font-size: 0.9rem;
	   border-radius: 100px;
	   transform: translate(0,-50%);
	   top: 50%;
	   right: 5%;
	   box-shadow: 0 0 5px 1px #FF9972;
   }
   .status{
	   padding: 1rem 7.5%;
   }
   .status text:nth-child(2){
	   float: right;
   }
   .record{
	  width: 92%;
	  margin:0 4%  0.5rem;
	  box-shadow: 0 0 10px 1px #eee;
	  min-height: 5rem;
	  border-radius: 8px;
	  padding: 1rem 5%;
   }
   .record-title{
	   font-weight: bold;
	   font-size: 0.95rem;
	   margin-bottom: 0.75rem;
   }
   .record-item text{
	   display: inline-block;
	   width: 33.33333%;
	   text-align: right;
	   line-height: 1.5rem;
   }
   .record-item text:first-child{
	   text-align: left;
   }
   .record-item text:nth-child(2){
   	   color: #4E5366;
   }
   .record-item-time{
	   width: 100%;
	   font-size: 0.6rem;
	   color: #aaa;
	   white-space: nowrap;
   }
</style>
